<template>
	<view class="page_wrap">
		<custom-header title="我的" :back="false" sticky
			bg-color="linear-gradient(90deg, #FEFEFE 0%, #FFF9EF 52%, #FEE8EA 100%);"
			border-color="transparent"></custom-header>
		<view class="user-info-wrap">
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-header">
					<image class="avatar" src="/static/home/tx.png" mode="aspectFit" />
					<view class="user-content">
						<view class="user-top">
							<text class="user-name">王二小</text>
							<view class="role-badge">
								<view class="icon">
									<image src="/static/my/role_icon.png" mode=""></image>
								</view>
								<view class="text">{{ role?.roleName }}</view>
							</view>
						</view>
						<text class="welcome">欢迎使用亚拍花卉管理系统</text>
					</view>
					<view class="switch-role" @click="isShowSwitchRole = true">
						<text>切换身份</text>
						<image class="switch-icon" src="/static/my/qh.png" mode="aspectFit" />
					</view>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" @click="handleAccountSecurity">
				<view class="item-left">
					<image class="item-icon" src="/static/my/zhaq.svg" mode="aspectFit" />
					<text class="item-text">账号安全</text>
				</view>
				<up-icon name="arrow-right" size="28rpx"></up-icon>
				<!-- <image class="arrow-icon" src="/static/common/right_icon.png" mode="aspectFit" /> -->
			</view>

			<view class="function-item" @click="handlePrivacyPolicy">
				<view class="item-left">
					<image class="item-icon" src="/static/my/ystj.svg" mode="aspectFit" />
					<text class="item-text">隐私政策</text>
				</view>
				<up-icon name="arrow-right" size="28rpx"></up-icon>
			</view>

			<view class="function-item" @click="handleUserAgreement">
				<view class="item-left">
					<image class="item-icon" src="/static/my/yhxy.svg" mode="aspectFit" />
					<text class="item-text">用户协议</text>
				</view>
				<up-icon name="arrow-right" size="28rpx"></up-icon>
			</view>

			<view class="version-info">
				<view class="item-left">
					<image class="item-icon" src="/static/my/bbh.svg" mode="aspectFit" />
					<text class="item-text">版本号</text>
				</view>
				<text class="version-number">v2.4.1(2505001)</text>
			</view>

			<view class="function-item" @click="handleLogout">
				<view class="item-left">
					<image class="item-icon" src="/static/my/tcdl.svg" mode="aspectFit" />
					<text class="item-text">退出登录</text>
				</view>
				<up-icon name="arrow-right" size="28rpx"></up-icon>
			</view>
		</view>
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast" />
			
		<!-- 切换身份 -->
		<custom-select 
			:show="isShowSwitchRole" 
			:datas="roleList"
			keyName="name"
			@confirm="handleSwitchRoleConfirm"
			@close="isShowSwitchRole = false"/>
	</view>
</template>

<script setup>
	import { computed,ref,onMounted } from 'vue';
	import { useStore } from 'vuex'
	const store = useStore()
	
	// 获取角色
	const role = computed(()=>store.getters.role)
	
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹出层确认按钮
	const confirmToast = (data)=>{
		console.log(data)
		// 退出登录
		if(data?.type == 'logOut'){
			setTimeout(()=>{
				hideToast()
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},800)
		}else{
			hideToast()
		}
	}
	
	
	
	// 切换身份
	const isShowSwitchRole = ref(false)
	const roleList = ref([
		{ name:'质检员',id:1 },
		{ name:'打包员',id:2 },
		{ name:'发货员',id:3 }
	])
	const handleSwitchRoleConfirm = (data)=>{
		store.commit('SET_ROLE',{
			roleId:data.id,
			roleName:data.name
		})
	}

	// 用户信息
	const userInfo = computed(() =>  store.getters.userInfo)

	// 账号安全
	const handleAccountSecurity = () => {
		// TODO: 实现账号安全功能
		uni.navigateTo({
			url:'/pages/accountSecurity/accountSecurity'
		})
	}

	// 隐私政策
	const handlePrivacyPolicy = () => {
		// TODO: 实现隐私政策功能
	}

	// 用户协议
	const handleUserAgreement = () => {
		// TODO: 实现用户协议功能
	}

	// 退出登录
	const handleLogout = () => {
		showToast({
			message:'您确定要退出登录？',
			showCancel:true,
			data:{
				type:'logOut'
			}
		})
	}
</script>

<style lang="scss">
	.user-info-wrap {
		height: 263rpx;
		background: linear-gradient(90deg, #FEFEFE 0%, #FFF9EF 52%, #FEE8EA 100%);
	}
	.user-info {
		padding: 30rpx;

		.user-header {
			display: flex;
			align-items: center;
			gap: 20rpx;
			position: relative;

			.avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 35rpx;
				flex-shrink: 0;
			}

			.user-content {
				flex: 1;

				.user-top {
					display: flex;
					align-items: center;
					gap: 12rpx;
					margin-bottom: 10rpx;

					.user-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.role-badge {
						width: 104rpx;
						height: 37rpx;
						font-size: 20rpx;
						border-radius: 8rpx;
						color: #8D2E00;
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(90deg, #FEDA8D 0%, #FFC26C 100%);
						.icon{
							width: 20rpx;
							height: 20rpx;
							display: flex;
							margin-right: 8rpx;
						}
					}
				}

				.welcome {
					font-size: 24rpx;
					color: #666666;
					line-height: 35rpx;
				}
			}

			.switch-role {
				display: flex;
				align-items: center;
				gap: 8rpx;
				margin-left: auto;
				background: #FFFFFF;
				padding: 8rpx 16rpx;
				border-radius: 30rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

				text {
					font-size: 24rpx;
					color: #666;
				}

				.switch-icon {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}

	.function-list {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin: 0 24rpx;
		transform: translateY(-100rpx);
		.function-item,
		.version-info {
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.item-left {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.item-icon {
					width: 36rpx;
					height: 36rpx;
				}

				.item-text {
					font-size: 30rpx;
					color: #333333;
				}
			}

			.arrow-icon {
				width: 28rpx;
				height: 28rpx;
			}

			.version-number {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
</style>